<template>
	<view class="echart-box">
		<view class="echart-line">
			<view @click="echarts.onClick" :prop="chartData" :change:prop="echarts.updateEcharts" :id="chartData.id" class="line"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			option: {
				type: Object,
				default: function () {
					return {}
				}
			}
		},
		data(options) {
			let option = options.option
			if (!option.id) {
				let chartId = new Date().getTime() + ''
				for(var i=0;i<6;i++) {
					chartId += Math.floor(Math.random()*10)
				}
				option.id = chartId
			}
			return {
				chartData: {
					...option
				}
			}
		},
		methods: {
			changeOption() {
				this.$emit('@changeOption')
			},
			onViewClick(options) {
				//options
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	import echarts from 'echarts'
	let myChart
	export default {
		// #ifndef APP-PLUS
		mounted() {
			this.initEcharts()
		},
		// #endif
		
		// #ifdef APP-PLUS
		beforeUpdate() {
			this.initEcharts()
		},
		// #endif
		methods: {
			//	初始化图表
			initEcharts() {
				myChart = echarts.init(document.getElementById(this.chartData.id))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.chartData)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.echart-line {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.line {
		width: 100%;
		height: 400rpx;
	}
</style>
